<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
     一般字符串："Cai"  'Lily'
    模板字符串：`Cai`
   
 -->

<body>
    <script>
        //  const username1 = "Cai";
        //  const username2 = `Cai`;
        //  console.log(username1, username2); //Cai Cai
        //  console.log(username1 === username2) //true


        //模板字符串与一般字符串的区别
        //和其他东西一起注入的时候，使用模板字符串 方便注入
        // const person = {
        //         username: "Cai",
        //         sex: "Female",
        //         age: 19

        //     }
        //一般字符串拼接的做法
        //const info = '我叫' + person.username + ",我的性别是" + person.sex + ',我今年' + person.age + '岁了';
        //console.log(info);
        //模板字符串拼接
        //    const info = `我的名字是:${person.username},性别：${person.sex},年龄：${person.age}`
        //    console.log(info); //我的名字是:Cai,性别：Female,年龄：19



        //输出多行字符串
        //一般字符串
        //  const info = ('第一行\n第二行');
        //  console.log(info);

        //模板字符串
        // const info = (`第一行\n第二行`)
        // console.log(info);

        //对于模板字符串 所有的空格 换行 缩进都会被保留在输出之中  怎么写就怎么输出


        //输出`和\等特殊字符
        //   const info = `\``;
        // console.log(info); //`
        //  const info = `\\`;
        //  console.log(info); //\


        //模板字符串的注入
        //${}
        const username = 'Cai';
        const person = {
            age: 19,
            sex: 'Female'
        }

        const getSex = function(sex) {
                return sex === 'Female' ? '女' : '男';
            }
            //只要最终可以得出一个值的就可以通过${}注入到模板字符串中
        const info = `${username},${person.age+2},${person.sex},${getSex(person.sex)}`;
        console.log(info); //Cai,21,Female,女
    </script>
</body>

</html>